<section class="header clearfix">
  {{#if isView}}
    <div class="right-buttons pull-right">
      {{badge-state model=model}}
      {{action-menu model=model showPrimary=false classNames="ml-10 inline-block" size="sm"}}
    </div>
  {{/if}}

  <h1>{{title}}</h1>
</section>

{{#if isView}}
  {{#if model.description}}
    {{banner-message color='bg-secondary mb-0 mt-10' message=(linkify model.description)}}
  {{/if}}
  {{#if model.showTransitioningMessage}}
    <div class="{{model.stateColor}}"><p>{{uc-first model.transitioningMessage}}</p></div>
  {{/if}}
{{else}}
  {{form-name-description
    model=primaryResource
    nameRequired=false
    nameDisabled=isEdit
    namePlaceholder="cruPersistentVolume.name.placeholder"
    descriptionPlaceholder="cruPersistentVolume.description.placeholder"
    editing=editing
  }}
{{/if}}

{{#if isView}}
  <div class="row banner bg-info basics">
    <div class="vertical-middle">
      <label class="acc-label vertical-middle p-0">{{t 'cruPersistentVolume.source.label'}}</label>
      {{t (concat 'volumeSource.' sourceName '.title')}}
    </div>
    <div class="vertical-middle">
      <label class="acc-label vertical-middle p-0">{{t 'cruPersistentVolume.capacity.label'}}</label>
      {{capacity}} {{t 'cruPersistentVolume.capacity.unit'}}
    </div>
    <div class="vertical-middle">
      <label class="acc-label vertical-middle p-0">{{t 'cruPersistentVolume.reclaimPolicy'}}</label>
      {{model.persistentVolumeReclaimPolicy}}
    </div>
  </div>
  <div class="row banner bg-info basics">
    <div class="vertical-middle">
      <label class="acc-label vertical-middle p-0">{{t 'cruPersistentVolume.pvc'}}</label>
      {{#if model.displayPvc}}
        {{model.displayPvc}}
      {{else}}
        <span class="text-muted">{{t 'generic.na'}}</span>
      {{/if}}
    </div>
    <div class="vertical-middle">
      <label class="acc-label vertical-middle p-0">{{t 'generic.created'}}</label>
      {{date-calendar model.created}}
    </div>
  </div>
{{else}}
  <div class="row">
    <div class="col span-6">
      <label class="acc-label">{{t 'cruPersistentVolume.source.label'}}{{field-required editing=editing}}</label>
      {{new-select
        content=sourceChoices
        prompt="cruPersistentVolume.source.prompt"
        localizedPrompt=true
        optionValuePath="name"
        value=sourceName
        readOnly=isView
      }}
    </div>
    <div class="col span-6">
      <label class="acc-label">{{t 'cruPersistentVolume.capacity.label'}}{{field-required editing=editing}}</label>
      <div class="input-group">
        {{input-number classNames="form-control" value=capacity}}
        <span class="input-group-addon bg-default">{{t 'cruPersistentVolume.capacity.unit'}}</span>
      </div>
    </div>
  </div>
{{/if}}



<hr class="mb-20" />

{{#accordion-list showExpandAll=false as | al expandFn |}}
  {{#accordion-list-item
    title=(t 'cruPersistentVolume.source.title')
    detail=(t 'cruPersistentVolume.source.detail')
    expandAll=expandAll
    expand=(action expandFn)
    expandOnInit=true
  }}
    {{#if sourceComponent}}
      {{component sourceComponent
        volume=model
        sourceStore=clusterStore
        editing=notView
      }}
    {{else}}
      <p class="text-muted">{{t 'cruVolume.sourcePrompt'}}</p>
    {{/if}}
  {{/accordion-list-item}}

  {{#accordion-list-item
    title=(t 'cruPersistentVolume.customize.title')
    detail=(t 'cruPersistentVolume.customize.detail')
    expandAll=expandAll
    expand=(action expandFn)
    everExpanded=true
  }}
    <div class="row">
      <div class="col span-6">
        {{form-access-modes
          model=primaryResource
          mode=mode
        }}
      </div>
      <div class="col span-6">
        {{form-value-array
          initialValues=primaryResource.mountOptions
          editing=(not isView)
          valueLabel="cruPersistentVolume.mountOptions.label"
          addActionLabel="cruPersistentVolume.mountOptions.addActionLabel"
          noDataLabel="cruPersistentVolume.mountOptions.noData"
          changed=(action "updateOptions")
        }}
      </div>
    </div>
    <div class="row">
      <div class="col span-6">
        <label class="acc-label">{{t 'cruPersistentVolume.storageClass.label'}}</label>
        {{#if editing}}
          {{new-select
            content=storageClasses
            prompt="cruPersistentVolume.storageClass.prompt"
            localizedPrompt=true
            optionLabelPath="displayName"
            optionValuePath="id"
            value=primaryResource.storageClassId
          }}
        {{else}}
          <div>
            {{#if primaryResource.storageClassId}}
              <a href="{{href-to "authenticated.cluster.storage.classes.detail.index" primaryResource.storageClassId}}">
                {{primaryResource.storageClass.displayName}}
              </a>
            {{else}}
              <span class="text-muted">{{t 'generic.none'}}</span>
            {{/if}}
          </div>
        {{/if}}
      </div>
    </div>
    <div class="row mt-20">
      <label class="acc-label">{{t 'cruPersistentVolume.nodeAffinity.label'}}</label>
      {{form-node-affinity 
        model=model.nodeAffinity.required 
        editing=notView
        changed=(action "updateNodeAffinities")
      }}
    </div>
  {{/accordion-list-item}}

  {{#if isView}}
    {{resource-event-list
      resourceType=(t 'generic.persistentVolume')
      expandAll=al.expandAll
      expandFn=expandFn
      name=model.name
      kind="PersistentVolume"
    }}

    {{annotations-section
      model=model
      expandAll=al.expandAll
      expandFn=expandFn
    }}
  {{/if}}
{{/accordion-list}}

{{#unless isView}}
  {{top-errors errors=errors}}
  {{save-cancel editing=true save="save" cancel="viewEditCancel"}}
{{/unless}}
